<template>
<div>
  <p style="margin-top: 20px;margin-left: 40px;font-size: 20px">商品管理--商品修改</p>
  <div>
    <el-form :model="list" label-width="80px">
      <el-form-item label="商品名称">
        <el-input  placeholder="请输入商品名称" v-model="list.name"></el-input>
      </el-form-item>
      <el-form-item label="商品描述">
        <el-input  placeholder="请输入商品描述" v-model="list.subtitle"></el-input>
      </el-form-item>
      <el-form-item label="所属分类">
        <el-select v-model="list.cls" @change="Change" placeholder="请选择一级品类">
          <el-option
            v-for="(item,index) in options"
            :key="index"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
        <el-select v-if="list.cls" v-model="list.clss"  placeholder="请选择一级品类">
          <el-option
            v-for="(item,index) in options1"
            :key="index"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品价格">
        <el-input  class="inp" placeholder="价格" v-model="list.price">
          <template slot="append">元</template>
        </el-input>
      </el-form-item>
        <el-form-item label="商品库存">
          <el-input   placeholder="库存" v-model="list.stock">
            <template slot="append">件</template>
          </el-input>
      </el-form-item>
    </el-form>
    <el-upload
      class="upload-demo"
      name="upload_file"
      action="/api/product/upload.do"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      v-model="list.subImages"
      multiple
      :limit="3"
      :on-success="handleSuccess"
      :on-exceed="handleExceed"
      :file-list="fileList">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    <quill-editor
      ref="myQuillEditor"
      v-model="list.detail"
      :options="editorOption"

      style="background-color: #fff;"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)"
    />
    <el-button type="primary" plain @click="add()">修改</el-button>
  </div>
</div>
</template>

<script>
  import {GoodList,add,coos} from "../../api/index.js";

  export default {
        name: "goodmove",
        data(){
          return{
            list:{
              categoryId:0,
              name:"",
              subtitle:"",
              price:"",
              stock:"",
              detail:"",
              cls:"",
              clss:"",
              subImages:"",
              status:"",
              id:""
            },
            options:[],
            options1:[],
            content: '<h2>I am Example</h2>',
            editorOption: {
              // Some Quill options...
            },
            fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
          }
        },
      mounted() {
        this.goodlist()
        this.ok()
      },
      methods:{
        handleSuccess(response, file, fileList) {
          this.list.subImages = response.data.uri;
        },
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePreview(file) {
          this.list.subImages=file.name
        },
        handleExceed(files, fileList) {
          this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
          return this.$confirm(`确定移除 ${ file.name }？`);
        },
        onEditorBlur(quill) {
          console.log('editor blur!', quill)
        },
        onEditorFocus(quill) {
          console.log('editor focus!', quill)
        },
        onEditorReady(quill) {
          console.log('editor ready!', quill)
        },
        onEditorChange({ quill, html, text }) {
          console.log('editor change!', quill, html, text)
          this.content = html
        },
        goodlist(){
          GoodList(this.$route.query.id).then(res=>{
            console.log(res);
            this.list.categoryId=res.data.categoryId;
            this.list.name=res.data.name;
            this.list.subtitle=res.data.subtitle;
            this.list.price=res.data.price;
            this.list.stock=res.data.stock;
            this.list.status=res.data.status;
            this.list.id=res.data.id;
          })
        },

        ok(){
          add(this.list.categoryId).then((res)=>{
            this.options=res.data
          })
        },
        Change(k){
          this.options.map((item,i)=>{
            if(item.name===k){
              add(item.id).then((res)=>{
                console.log(res);
                this.options1=res.data
              })
            }
          })
        },

        add(){
          coos(this.list).then(res=>{
            console.log(res);
            this.$message( {
              message:res.data,
              type:"message"
            });
            this.$router.push("/good")
          })
        }
      },
      computed: {
        editor() {
          return this.$refs.myQuillEditor.quill
        }
      },

    }
</script>

<style lang="scss" scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
